<template>
	<view class="bg w100 min100 pt-1">
		<empty v-if="list.length==0" text="暂无优惠券"></empty>
		<view class="mlr-36 mt-30 bg-white radius-10" v-for="(item,i) in list" :key="i">
				<view class="list-top flex ptb-30 plr-25">
					<view class="">
						<view v-if="item.coupon_name==1">
							<text :class="[item.be_status==0?'gray-2':'red']">新人券 </text> {{item.remark}}
						</view>	
						<view v-if="item.coupon_name==2">
							<text  :class="[item.be_status==0?'gray-2':'red']">福利券 </text> {{item.remark}}
						</view>	
						<view class="size-26 gray-2 mt-15">
							截止时间: {{item.expiration}}
						</view>
					</view>
					<view :class="[item.be_status==0?'gray-2':'red']">
						<text class="size-26">￥</text><text class="size-50">{{item.coupon_price}}</text>
					</view>
				</view>
				<view class="flex plr-25 ptb-30">
					<view class="size-26 gray-2">
						满{{item.limit_price}}元可使用
					</view>
					<view @click="useCoupon(item.be_status,item.id,item.coupon_price)" :class="[item.be_status==0?'bg-gray-2':'bg-green','white ptb-10 plr-20']" >
						{{item.be_status==0?'不适用':'立即使用'}}
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sf_type:'',
				id:'',
				list:[],
				price:''
			}
		},
		onLoad(option) {
			this.sf_type = option.sf_type
			this.id = option.id
			this.price = option.price
			this.init()
		},
		methods: {
			init(){
				let id = this.id?this.id:''
				let price = this.price?this.price:''
				this.$http('/addons/ddrive/user/pay_coupon',{
					sf_type:this.sf_type,
					order_id: id,
					order_price: price
				},"POST").then(data=>{
					this.list = data
				})
			},
			useCoupon(status,id,p){
				if(status==0) return
				uni.$emit("coupon",{id:id,price:p})
				uni.navigateBack({
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-top{
	  border-bottom: 1rpx dashed #d8d8d8;
	  position: relative;
	 }
	 .list-top::before{
	  position: absolute;
	  content: "";
	  width: 52rpx;
	  height: 52rpx;
	  border-radius: 50%;
	  background: #f8f8f8;
	  left: -26rpx;
	  bottom: -26rpx;
	 }
	 .list-top::after{
	  position: absolute;
	  content: "";
	  width: 52rpx;
	  height: 52rpx;
	  border-radius: 50%;
	  background: #f8f8f8;
	  right: -26rpx;
	  bottom: -26rpx;
	 }
</style>
